<template>
  <a-layout-sider
    :class="[
      'sider maxWidthAuto',
      isDesktop() ? null : 'shadow',
      theme,
      fixSiderbar ? 'ant-fixed-sidemenu' : null
    ]"
    :width="'auto'"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null"
  >
    <!-- <logo :style="`width:${collapsed?'90px':'218px'}`" /> -->
    <!-- <logo :style="`width:${!collapsed ? 210 : 80}px`" :close="!collapsed" /> -->
    <s-menu
      :collapsed="collapsed"
      :menu="menus"
      @select="onSelect"
      @toggle="toggle"
      @l3Select="l3Select"
      :rightMenuMaskShow="rightMenuMaskShow"
      :style="`width:${!collapsed ? 210 : 80}px;padding: 0px`"
    ></s-menu>
  </a-layout-sider>
</template>

<script>
import Logo from '@/components/tools/Logo'
import SMenu from './leftMenu.vue'
import { mixin, mixinDevice } from '@/utils/mixin'

export default {
  name: 'SideMenu',
  components: { Logo, SMenu },
  mixins: [mixin, mixinDevice],
  props: {
    mode: {
      type: String,
      required: false,
      default: 'inline'
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    rightMenuMaskShow: {
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    menus: {
      type: Array,
      required: true
    }
  },
  mounted () {
    console.log(this.menus)
  },
  data () {
    return {
      childLength: 0
    }
  },
  methods: {
    onSelect (num) {
      this.childLength = num
      this.$emit('menuSelect')
    },
    toggle () {
      this.$emit('toggle')
    },
    l3Select () {
      this.$emit('l3Select')
    }
  }
}
</script>
<style lang="less" scoped>
.maxWidthAuto {
  max-width: 218px !important;
}
.sider /deep/ .ant-layout-sider-children{
  overflow: inherit;
}
.sider /deep/ .ant-layout-sider-children:hover{
  overflow: inherit;
}
</style>
